<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full flex flex-row justify-between">
            <div class="flex flex-row  w-w2/5">
                <el-input class="w-w1/3" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                    v-model="s_goods.m_screen_list.name" @clear="action_list_goods">
                </el-input>
                <el-button type="primary" class=" bg-cmain_hover ml-w10" @click="action_list_goods">搜索</el-button>
                <el-select class="w-w1/3 ml-w10" v-model="s_goods.m_screen_list.type" placeholder="请选择商品类型" clearable
                    @clear="action_list_goods" @change="action_list_goods">
                    <el-option :label="'心理测评'" :value="1">
                    </el-option>
                    <el-option :label="'专家咨询'" :value="2">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                @click="action_show_page(null)">添加商品
            </el-button>
        </div>
        <div class="w-full h-full mt-w20 ">
            <el-table :data="s_goods.list_goods" stripe style="width: 100%; " height="660">
                <el-table-column type="index" label="序号" min-width="5%">
                </el-table-column>
                <el-table-column prop="logo" label="图片" min-width="10%">
                    <template slot-scope="scope">
                        <el-image style="width: 117px; height: 55px" :src="scope.row.listCover" lazy
                            :preview-src-list="[scope.row.listCover]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" min-width="15%">
                    <template slot-scope="scope">
                        <div>{{ scope.row.name }}<span class=" ml-w10 text-cred1" v-if="scope.row.activity">（活动）</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="typeStr" label="商品类型" min-width="10%">
                </el-table-column>
                <el-table-column prop="truePrice" label="商品价格" min-width="10%">
                </el-table-column>
                <el-table-column prop="sort" label="排序" min-width="5%">
                  <div class="item flex flex-row items-center" slot-scope="scope">
                    <div v-if="scope.row.top !== 0">【置顶】</div>
                    <div v-else>{{ "【" + scope.row.sort + "】" }}</div>
                    <div v-if="scope.row.top === 0" style="display: flex">
                      <img
                          class="w-w20 h-w20 cursor-pointer"
                          src="@/assets/image/icon_data_down_normal.png"
                          alt="下移"
                          srcset=""
                          @click="action_move_down(scope.row)"
                      />
                      <img
                          class="w-w20 h-w20 cursor-pointer"
                          src="@/assets/image/icon_data_up_normal.png"
                          alt="上移"
                          srcset=""
                          @click="action_move_up(scope.row)"
                      />
                    </div>
                  </div>
                </el-table-column>
                <el-table-column label="操作" min-width="10%">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="action_move_top(scope.row)" v-if="scope.row.top === 0">
                        置顶</el-button>
                      <el-button size="mini" @click="action_cancel_top(scope.row)" v-if="scope.row.top !== 0">
                        取消置顶</el-button>
                        <el-button type="text" @click="action_show_page(scope.row.id)" class="mr-w10">
                          详情
                        </el-button>
                        <el-popconfirm title="是否删除该商品？" @confirm="action_del_goods(scope.row.id)"
                            confirm-button-type="text">
                            <el-button slot="reference" class=" text-cred1" type="text">
                                删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="w-full flex items-end justify-center" style="height:7%">
                <el-pagination background layout="prev, pager, next" :total="s_goods.m_page.total"
                    :page-size="s_goods.m_page.limit" @current-change="action_page_change">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>

</style>
